<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <!-- 引入vue2的js文件 -->
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.7.9/vue.js"></script>
  </head>
  <body>
    <div id="app">
      <login></login>
      <hr />
      <login></login>
      <hr />
      <login></login>
    </div>

    <script>
      /**
       * 定义全局组件（局部组件后面会说到）
       * 参数1：组件的名字
       * 参数2：组件对应的实例（data、computed、methods、...各种选项式api都可以在它里面写）
       */
      Vue.component('login', {
        // 用于定义组件的视图部分
        template: `
        <div>
            <p>用户名:<input v-model="username"/></p>
            <p>密码:<input v-model="password"/></p>
            <p>
            <button @click="login">登录</button>
            </p>
        </div>
        `,
        // 如果在组件的实例中，把 data 写成一个对象，直接报错
        // data: {
        //   username: '',
        //   password: ''
        // },
        // 由于我们的组件是复用的，必须要写写成下面的样子
        data() {
          // 返回新对象
          return {
            username: '',
            password: ''
          }
        },
        methods: {
          login() {
            console.log(this.username, this.password)
          }
        }
      })

      // 根实例，一个项目只有一个，服务于整个项目
      new Vue({
        el: '#app'
      })
    </script>
  </body>
</html>
